<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="lib/layui/layui.js"></script>
<link rel="stylesheet" type="text/css" href="lib/layui/css/layui.css" />
<body>

<!-- 头部搜索框 -->
<div>
		<form action="admingoods.do/findAll.do" method="post">
		商品名称：
		<div class="layui-inline">
   			 <input class="layui-input" id="goods_name" autocomplete="off">
  		</div> 
			  <button type="button" class="layui-btn" onclick="searchBtn()">检索</button>
			  <button type="button" class="layui-btn" onclick="addBtn()">添加</button>	
		</form>
</div>
<table id="demo" lay-filter="test"></table>
<!--添加的窗体  -->
<div id="addWin" style="display:none">
   <form>
	   <div class="layui-form-item">
	    <label class="layui-form-label">商品名称</label>
	    <div class="layui-input-inline">
	      <input type="text" name="uname" id="addgoods_name"  placeholder="请输入姓名" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品简介</label>
	    <div class="layui-input-inline">
	      <input type="text" name="title" id="age" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品价格</label>
	    <div class="layui-input-inline">
	      <input type="text" name="title" id="age" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品品牌</label>
	    <div class="layui-input-inline">
	      <input type="text" name="title" id="age" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品编号</label>
	    <div class="layui-input-inline">
	      <input type="text" name="title" id="age" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品口味</label>
	    <div class="layui-input-inline">
	      <input type="text" name="title" id="age" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品产地</label>
	    <div class="layui-input-inline">
	      <input type="text" name="title" id="age" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
		<div class="layui-form-item">
			 <div class="layui-input-block">
			   <button type="button" class="layui-btn" onclick="addSaveBtn()"  lay-filter="demo1">立即提交</button>
			   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			  </div>
		</div>
   </form>
</div>
<!--添加窗体结束  -->
<!--修改的窗体  -->
<div id="updateWin" style="display:none" action="admingoods.do/edit.do" method="post">

   <form id="fm"  class="layui-form" lay-filter="fm">
   <input type="hidden" name="goods_id" id ="u_id"/>
	   <div class="layui-form-item">
	    <label class="layui-form-label">商品名称</label>
	    <div class="layui-input-inline">
	      <input type="text" name="goods_name" id="egoods_name"  placeholder="请输入姓名" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品简介</label>
	    <div class="layui-input-inline">
	      <input type="text" name="goods_description" id="egoods_description" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品价格</label>
	    <div class="layui-input-inline">
	      <input type="text" name="goods_price" id="egoods_price" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品品牌</label>
	    <div class="layui-input-inline">
	      <input type="text" name="goods_brand" id="egoods_brand" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品编号</label>
	    <div class="layui-input-inline">
	      <input type="text" name="goods_number" id="egoods_number" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品口味</label>
	    <div class="layui-input-inline">
	      <input type="text" name="goods_type" id="egoods_type" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">商品产地</label>
	    <div class="layui-input-inline">
	      <input type="text" name="goods_address" id="egoods_address" required  lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input">
	    </div>
	  </div>
		<div class="layui-form-item">
			 <div class="layui-input-block">
			   <button type="button" class="layui-btn" onclick="updateSaveBtn()"  >立即提交</button>
			   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
			  </div>
		</div>
   </form>
</div>
<!-- 修改结束 -->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>

//预加载
$(function(){
	searchBtn();
})

var  tableObj;
var updateIndex;
function searchBtn(){
	var username = $("#username").val();//alert(username);
	layui.use(['table','laydate','layer','form',"upload"], function(){
		  var table = layui.table;
		  var laydate = layui.laydate;
		  var layer = layui.layer;
		  var form = layui.form;
		  var upload = layui.upload;
		  laydate.render({
			  elem:"#date"
		  })
		  laydate.render({
			  elem:"#u_date"
		  })
		 //第一个实例
  tableObj=table.render({
    elem: '#demo'
    ,url: 'admingoods.do/findAll.do' //数据接口
    ,page: true //开启分页
    ,where:{
    	goods_name:$("#goods_name").val()
    }
    ,cols: [[ //表头
      {field: 'goods_name', title: '商品名称', width:100}
      ,{field: 'goods_description', title: '详情', width:177, sort: true}
      ,{field: 'recommend_picture', title: '图片', width:100} 
      ,{field: 'show_recommend', title: '是否推荐', width:100}
      ,{field: 'show_carousel', title: '是否上架', width: 100}
      ,{field: 'category_name', title: '商品类别', width: 100, sort: true}
      ,{field: 'goods_price', title: '商品价格', width: 120,sort: true}
      ,{field: 'goods_brand', title: '品牌', width: 100}
      ,{field: 'goods_number', title: '商品编号',width: 100, sort: true}
      ,{field: 'goods_type', title: '口味', width: 100, sort: true}
      ,{field: 'goods_address', title: '产地', width: 100, sort: true}
      ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
		  
		//监听行工具事件
		  table.on('tool(test)', function(obj){
			  //当前行对象
		    var data = obj.data;
		    //console.log(obj)
		    if(obj.event === 'del'){
		    	var id = data.uid;
		      if(confirm("确认删除吗")){
		    	  $.post("IUserDelServlet",{
		    		  id:id
		    	  },function(res){
		    		  if(res=="true"){
		    			  layer.msg("删除成功");
		    			  //刷新表格
		    			  tableObj.reload();
		    		  }
		    	  })
		      }
		    } else if(obj.event === 'edit'){
		     //alert(123);
		     //1弹出窗体   并且窗体上面回显当前行数据
		     //先回显数据  fm指的是form表单的lay-filter的值    data指的是当前行对象
		     form.val("fm",data);
		     updateIndex = layer.open({
		    	 type:1,
		    	 content:$("#updateWin"),
		    	 title:"修改窗体",
		    	 area:['350px','400px']
		     })
		    }
		  });
		
		var userid = $("#userid").val();//alert(userid);
		//图片上传
		  var uploadInst = upload.render({
			    elem: '#test1'
			    ,url: 'UploadImagesController?uid='+userid //改成您自己的上传接口
			    ,done: function(res){
			     
			      //上传成功
			      if(res==true){
			    	  layer.close(imgIndex);
			    	  tableObj.reload();
			      }
			    }
			   
			  });
		  
		});
}
//点击图片按钮触发
var imgIndex;
 function updateImg(id){
	//alert(id);
	//给文本框赋值
	$("#userid").val(id);
	imgIndex = layer.open({
		type:1,
		content:$("#updateImages"),
		title:"图片上传",
		area:['350px','350px']
	})
}
//添加  点击添加按钮，弹出窗体
var addIndex;
function addBtn(){
	layui.use("layer",function(){
		var layer = layui.layer;
		addIndex = layer.open({
			type:1,
			title:"添加窗体",
			content:$("#addWin"),
			area :['350px','400px']
		})
	})
}
//点击修改保存按钮
function updateSaveBtn(){
	var u_id = $("#u_id").val();
	var egoods_name = $("#egoods_name").val();
	var egoods_description = $("#egoods_description").val();
	var egoods_price = $("#egoods_price").val();
	var egoods_brand = $("#egoods_brand").val();
	var egoods_number = $("#egoods_number").val();
	var egoods_type = $("#egoods_type").val();
	var egoods_address = $("#egoods_address").val();
	if(confirm("确认修改吗")){
		$.post("admingoods.do/edit.do",{
			goods_id:u_id,
			goods_name:egoods_name,
			goods_description:egoods_description,
			goods_price:egoods_price,
			goods_brand:egoods_brand,
			goods_number:egoods_number,
			goods_type:egoods_type,
			goods_address:egoods_address
		},function(res){
			if(res==true){
				//关闭窗体   刷新表格
				layer.close(updateIndex);
				tableObj.reload();
				
			}else{
				//关闭窗体   刷新表格
				layer.close(updateIndex);
				tableObj.reload();
				
			}
		})
	}
	
}
//点击添加保存按钮
function  addSaveBtn(){
	//获取表单参数
	//或取用户名
	var uname = $("#uname").val();
	var sex = $("input[name='sex']:checked").val();
	var age = $("#age").val();
	var birthday = $("#date").val();
	var cid = $("#cid option:selected").text();
	
	//2.提交参数
	if(confirm("确认提交吗？")){
		$.post("IUserAddServlet",{
			uname:uname,
			sex:sex,
			age:age,
			birthday:birthday,
			cid:cid
		},function(res){
			if(res=="true"){
				layer.msg("添加成功");
				layer.close(addIndex);
				//刷新表格
				tableObj.reload();
			}else{
				layer.msg("添加失败");
			}
		})
	}
	
	
	//3.关闭窗体
}
</script>
<!--图片上传窗体  -->
<div id="updateImages" style="display:none">
<input type="text" id="userid"/>
<div class="layui-upload">
  <button type="button" class="layui-btn" id="test1">上传图片</button>
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="demo1">
    <p id="demoText"></p>
  </div>
</div>  
</div>
</body>
</html>